﻿<%@ Page language="C#" Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" meta:webpartpageexpansion="full" %>
<%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
    <SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
</asp:Content>

<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
<!-- this is invisibale div which used to conculate for other element on this page, DONOT remove it -->
<div class="dummy-class container-fluid"></div>
<nav class="navbar intel-dev-sub-nav navbar-fixed-top container-fluid" style="margin-top: 83px">
    <ul class="nav nav-center">
        <li style="display: inline-block;">
            <a href="#" onclick=" return gotoRegion('#intel-dev-region-1'); ">
                What We Can Help You Do
            </a>
        </li>
        <li style="display: inline-block;">
            <a href="#" onclick=" return gotoRegion('#intel-dev-region-2'); ">
                Spotlight Program
            </a>
        </li>
        <li style="display: inline-block;">
            <a href="#" onclick=" return gotoRegion('#intel-dev-region-3'); ">
                Development Consultants
            </a>
        </li>
    </ul>
</nav>
<div class="intel-dev-body container-fluid text-center">

    <div class="row intel-row-margin-padding">
        <div>
            <div class="intel-dev-top">
                <div class="intel-text-color intel-text-dev-header-top">
                    <p>
                        Development
                    </p>
                </div>

                <div class="intel-text-dev-content">
                    <p>
                        Our job is to understand you, your goals and your business context so we can identify relevant opportunities and plan your custom development plan. We’ll partner with you to get you the resources you need and check back on your progress so we can iterate and adjust.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="row" style="display: block">

        <PublishingWebControls:EditModePanel runat="server" id="EditModePanelB">
            <PublishingWebControls:RichImageField id="ImageField" FieldName="Dev Image Resource 1" runat="server" />
            <PublishingWebControls:RichImageField id="ImageField2" FieldName="Dev Image Resource 2" runat="server"/>
            <PublishingWebControls:RichImageField id="ImageField3" FieldName="Dev Image Resource 3" runat="server"/>
            <PublishingWebControls:RichImageField id="ImageField4" FieldName="Dev Image Resource 4" runat="server"/>
            <PublishingWebControls:RichImageField id="ImageFieldSpotlight" FieldName="Dev Image Spotlight" runat="server"/>
        </PublishingWebControls:EditModePanel>
    </div>

    <div class="row">
        <PublishingWebControls:EditModePanel runat="server" id="EditModePanelA" PageDisplayMode="Display">
            <div id="image1" onclick=" return changeImage(); " style="cursor: pointer;">
                <div class="col-sm-6 intel-dev-header-img">
                    <SharePointWebControls:FieldValue runat="server" id="ImageFieldValue" FieldName="Dev Image Resource 1" />
                </div>
                <div class="col-sm-6 intel-dev-header-img">
                    <SharePointWebControls:FieldValue runat="server" id="ImageFieldValue2" FieldName="Dev Image Resource 2"/>
                </div>
            </div>
            <div id="image2" class="hidden" onclick=" return changeImage(); " style="cursor: pointer;">
                <div class="col-sm-6 intel-dev-header-img">
                    <SharePointWebControls:FieldValue runat="server" id="ImageFieldValue3" FieldName="Dev Image Resource 3"/>
                </div>
                <div class="col-sm-6 intel-dev-header-img">
                    <SharePointWebControls:FieldValue runat="server" id="ImageFieldValue4" FieldName="Dev Image Resource 4"/>
                </div>
            </div>

        </PublishingWebControls:EditModePanel>
    </div>
</div>
<div class=" text-center container-fluid">
    <!-- region 1: what we can help you -->
    <div class="intel-background-gray">
        <div class="intel-text-color intel-dev-header-middle" id="intel-dev-region-1">
            WHAT WE CAN HELP YOU
        </div>
        <div class="row">
            <div class="col-xs-6">
                <div style="margin: 0px auto 60px auto; width: 50%;">
                    <p class="intel-text-color intel-dev-youself-header">
                        Develop Yourself
                    </p>
                    <p class="intel-dev-youself-content">
                        Access programs and coaching that deliver practical insight, techniques and tools for personal development, including how to: Deliver a more impactful pitchManage stakeholders Expand your professional network
                    </p>
                </div>
            </div>
            <div class="col-xs-6">
                <div style="margin: 0px auto; width: 50%;">
                    <p class="intel-text-color" style="font-size: 24px">
                        Develop Your Team
                    </p>
                    <p class="intel-dev-youself-content">
                        Learn new strategies and emerging technologies to foster your team’s technical expertise and collaboration, including how to: Collaborate across business groupsBuild leadership skills Identify emerging technology opportunities
                    </p>
                </div>

            </div>
        </div>

        <!-- region 2: spotlight -->
        <div class="intel-dev-spotlight" id="intel-dev-region-2">
            <div class="intel-dev-spotlight-content">
                <p style="padding-top: 60px" class="intel-dev-header-middle intel-dev-spotlight-header">
                    SPOTLIGHT PROGRAM
                </p>
                <p class="intel-dev-spotlight-header2">
                    Executive Accelerator
                </p>
                <p class="intel-dev-spotlight-text">
                    Announcing our first, flagship executive development solution.
                </p>
                <p class="intel-dev-spotlight-text">
                    Discover how this new program will support Intel’s leader
                </p>
                <p class="intel-dev-spotlight-text">
                    expectations and business imperatives.
                </p>
                <div class="intel-dev-spotlight-button-area" style="background-color: white; margin: 0 auto; max-width: 300px; padding: 10px 20px 10px 20px">
                    <a class="intel-text-color intel-dev-spotlight-button" href="./Program-Details.aspx">
                        Get the program details
                    </a>
                </div>
            </div>
            <PublishingWebControls:EditModePanel runat="server" id="EditModePanelAS" PageDisplayMode="Display">
                <div id="spotlight-img">
                    <img id="intel-dev-spotlight-default-img" src="../Style Library/Intel/images/spotlight.bmp" alt="Spotlight">
                    <SharePointWebControls:FieldValue runat="server" id="FieldValue1" FieldName="Dev Image Spotlight"/>
                </div>
            </PublishingWebControls:EditModePanel>
        </div>

        <!-- region 3: consultants -->
        <div class="intel-background-gray" style="padding: 0px 0px 60px 0px">
            <div class="intel-text-color intel-dev-header-middle" id="intel-dev-region-3">
                DEVELOPMENT CONSULTANTS
            </div>
            <p class="intel-dev-consultants-content">
                We believe that our
                leader must have access to the best development resouces
                avaiable.
            </p>
            <p class="intel-dev-consultants-content">
                Our approach includes:
                consultation, assessment, planning, developemnt and feedback.
            </p>
        </div>

    </div>
</div>
<div class="container-fluid" data-bind="foreach: people">
    <!-- <div>
        Name: <b data-bind="text: name"></b>, Address: <b data-bind="text: address"> </b>
    </div> -->
    <div class="intel-dev-bio-list">
        <div class="row " data-bind="css: { alt: $index() % 2 }">
            <div class="col-sm-8 intel-dev-bio-img">
                <img data-bind="attr: { src: imageurl }" style="width: 100%">
            </div>
            <div class="col-sm-4 intel-dev-bio-info intel-dev-consultant-content">
                <p data-bind="text: name"></p>
                <p data-bind="text: title"></p>
                <p style="padding-top: 10px;" data-bind="text: address"></p>
                <p data-bind="text: phone"></p>
                <p data-bind="text: email" class="intel-text-color"></p>
                <a href="javascript:void(0)" onclick=" showBiography(this); " class="intel-text-color" style="padding-top: 10px; position: absolute; text-decoration: none;">
                    Biography &gt;
                </a>
                <!-- <b data-bind="text: $index"></b> -->
            </div>
        </div>
        <div class="intel-dev-bio-dialog intel-background-gray hidden">
            <div class="intel-row-margin intel-dev-content" data-bind="html: bio"></div>
            <a href="javascript:void(0)" id="close" onclick=" closeBiography(); "></a>
        </div>
    </div>
</div>

<script type="text/javascript">
    function changeImage() {
        var x = $("#image1");
        if (x.hasClass("hidden")) {
            x.removeClass("hidden");
        } else {
            x.addClass("hidden");
        }

        var y = $("#image2");
        if (y.hasClass("hidden")) {
            y.removeClass("hidden");
        } else {
            y.addClass("hidden");
        }

    }

    function gotoRegion(id) {
        var x = $(id).position().top;
        var l = $(window).height() / 2;
        $("html, body").animate({ scrollTop: Math.abs(x - l) }, 800);
        return false;
    }

    function showBiography(item) {
        var x = $(item.parentNode.parentNode.parentNode.children[1]);
        var isHidden = x.hasClass("hidden");
        $(".intel-dev-bio-dialog").addClass("hidden");

        if (isHidden) {
            x.removeClass("hidden");
        }

        return false;
    }

    function closeBiography() {
        $(".intel-dev-bio-dialog").addClass("hidden");
        return false;
    }

    function setBioInfoMargin() {
        var documentHeight = $(".dummy-class").width();
        var x = $(".intel-row-margin").width();
        $(".alt .intel-dev-bio-info").css({ 'margin-left': (documentHeight - x) / 2 + "px" });

        $(".intel-dev-sub-nav").css({ 'margin-top': $(".navbar-header").height() + "px" });
        $(".intel-dev-body").css({ 'margin-top': ($(".intel-dev-sub-nav").height()) + "px" });
        $(".s4-ribbonrowhidetitle").css({ 'margin-top': ($(".intel-dev-sub-nav").height()) + "px" });
    }

    function makeImagesReponsitive() {
        $("#spotlight-img").find("img").css({ 'width': "100%" });
        if ($('#spotlight-img').children().length > 1) {
            $("#intel-dev-spotlight-default-img").hide();
        }

        $(".intel-dev-header-img").find("img").css({ 'width': "100%" });
    }

    $(function() {
        setBioInfoMargin();
        makeImagesReponsitive();
        $(window).resize(function() {
            setBioInfoMargin();
        });
        loadData();

    });

    function loadData() {
        var consultantsList = [];
        var Person = function(name, title, address, phone, email, bio, imageurl, order) {
            this.name = name;
            this.title = title;
            this.address = address;
            this.phone = phone;
            this.email = email;
            this.bio = bio;
            this.imageurl = imageurl;
            this.order = order;
        };
        var viewModel = function(items) {
            this.people = ko.observableArray(items);
        };

        //get data from SP
        SP.SOD.executeFunc("sp.js", "SP.ClientContext", sharePointListReady);
        var items;
        var listTitle = "Consultants";

        function sharePointListReady() {
            var ctx = SP.ClientContext.get_current();
            var list = ctx.get_web().get_lists().getByTitle(listTitle);
            var query = new SP.CamlQuery();
            query.ViewXml = "<View><Query></Query></View>";
            //"<View><Query><Where><Eq><FieldRef Name='ID'/><Value Type='Number'>2</Value></Eq></Where></Query></View>";
            items = list.getItems(query);
            ctx.load(items);
            ctx.executeQueryAsync(onRequestSucceeded, onRequestFailed);
        }

        function onRequestSucceeded() {
            var listItemEnumerator = items.getEnumerator();
            while (listItemEnumerator.moveNext()) {
                var oListItem = listItemEnumerator.get_current();
                var itemImage = oListItem.get_item("ConsultantImage");
                var itemImageSrc = $.parseHTML(itemImage)[0].src;
                consultantsList.push(new Person(oListItem.get_item("ConsultantName").toUpperCase(),
                    oListItem.get_item("ConsultantTitle"),
                    oListItem.get_item("ConsultantLocation"),
                    oListItem.get_item("ConsultantPhoneNumber"),
                    oListItem.get_item("ConsultantEmail"),
                    oListItem.get_item("ConsultantBiography"),
                    itemImageSrc,
                    oListItem.get_item("ConsultantOrder")));

            };
            consultantsList.sort(function(a, b) {
                return (a.order > b.order);
            });
            // Activates knockout.js 
            ko.applyBindings(viewModel(consultantsList));
            setBioInfoMargin();
        }

        function onRequestFailed(sender, args) {
            alert("Error: " + args.get_message());
        }
    }
</script>

</asp:Content>